@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --foreground-rgba: 0, 0, 0;
    --text-white: rgba(255, 255, 255, .87);
    --sailor-blue: #006CE1;
    --sailor-blue-darker: #0056B3;
    --sea-green: #19A68C;
    --navy-blue: #003366;
    --amber: #FDA543;
    --amber-darker: #C98437;
    --crimson-red: #B02A37;
    --crimson-red-darker: #891A23;
    --light-gray-darker: #6C757D;
    --light-gray-lighter: #ebebeb;
    --dark-gray: #343A40;

    --main-bg-color: #313f73;
}

@media (prefers-color-scheme: dark) {
    :root {
        --foreground-rgba: 255, 255, 255, 0.87;
    }
}

body {
    background-color: var(--main-bg-color);

}

@layer utilities {
    .text-balance {
        text-wrap: balance;
    }
}
